<template>
  <el-row>
    <el-row>
      <table class="tab">
        <tr>
          <td>
            {{ $t('letterReviewOrder.reviewOrderNo') }}
          </td>
          <td>
            {{ creditOrderNo }}
          </td>
        </tr>
      </table>
    </el-row>
    <el-row>
      <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="letterRecordData"
        border
        :stripe="true"
        style="width: 100%"
      >
        <el-table-column
          prop="creditOrderOperate"
          :label="$t('letterReviewOrder.orderStage')"
          min-width="150"
        />
        <el-table-column
          prop="operateResult"
          :label="$t('common.operate.name')"
          min-width="150"
        />
        <el-table-column
          prop="auditRejectDsec"
          :label="$t('letterReviewOrder.reviewRejectionStageReason')"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row['auditRejectDsec'] && scope.row['auditRejectDsec'].length > 0" class="item" effect="dark" placement="top-start">
              <div slot="content">
                <span v-html="textDesc(scope.row['auditRejectDsec'])" />
              </div>
              <div>{{ setDesc(scope.row['auditRejectDsec']) }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          :label="$t('letterReviewOrder.remarks')"
          min-width="150"
        />
        <el-table-column
          prop="operateEmployee"
          :label="$t('letterReviewOrder.operator')"
          min-width="150"
        />
        <el-table-column
          prop="operateTime"
          :label="$t('letterReviewOrder.operatingTime')"
          min-width="170"
        />
      </el-table>
    </el-row>
  </el-row>
</template>

<script>

export default {
  name: 'LetterReview',
  props: {
    creditOrderNo: {
      type: String,
      default: null
    },
    letterRecordData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  methods: {
    setDesc(data) {
      if (data !== null) {
        const str = JSON.parse(JSON.stringify(data)).join(',')
        return (str && str.length > 20) ? str.substring(0, 20) + '...' : str
      }
    },
    textDesc(data) {
      if (data) {
        const str = JSON.parse(JSON.stringify(data)).join('<br/><br/>')
        return str
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .tab,.tab tr{
    width: 100%;
  }
  .tab{
    margin-bottom: 20px;
    border-collapse: collapse;
  }
  .tab tr td{
    height: 40px;
    text-align: center;
    border:1px #cccccc solid;
  }
</style>

